<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>我的收件 - 快递管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <h2 class="mb-4">我的收件</h2>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">我收到的包裹</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-warning mb-3">
                    <i class="fas fa-exclamation-circle me-2"></i>未揽件的包裹不能签收
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>订单号</th>
                                <th>寄件人</th>
                                <th>寄件地址</th>
                                <th>收件人</th>
                                <th>收件人ID</th>
                                <th>收件地址</th>
                                <th>包裹类型</th>
                                <th>重量(kg)</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="order : ${orders}">
                                <td th:text="${order.orderNumber}"></td>
                                <td th:text="${order.senderName}"></td>
                                <td th:text="${order.senderAddress}"></td>
                                <td th:text="${order.receiverName}"></td>
                                <td th:text="${order.receiverId}"></td>
                                <td th:text="${order.receiverAddress}"></td>
                                <td th:text="${order.packageType}"></td>
                                <td th:text="${order.weight}"></td>
                                <td>
                                    <span class="badge"
                                          th:classappend="${order.status == '待处理' ? 'bg-secondary' : 
                                          (order.status == '已揽收' ? 'bg-info' : 
                                          (order.status == '运输中' ? 'bg-primary' : 
                                          (order.status == '未签收' ? 'bg-warning' : 
                                          (order.status == '已签收' ? 'bg-success' : 'bg-danger'))))}"
                                          th:text="${displayStatusMap.get(order.status) != null ? displayStatusMap.get(order.status) : order.status}">
                                    </span>
                                </td>
                                <td th:text="${#temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm:ss')}"></td>
                                <td>
                                    <button class="btn btn-sm btn-primary view-details-btn" th:data-order-id="${order.id}">查看</button>
                                    <button class="btn btn-sm btn-success sign-for-parcel-btn" th:data-order-id="${order.id}" th:if="${order.status == 'PICKED_UP' || order.status == 'SHIPPED' || order.status == 'IN_TRANSIT' || order.status == 'UNRECEIVED'}">签收</button>
                                    <button class="btn btn-sm btn-danger cancel-received-order-btn" th:data-order-id="${order.id}" th:data-order-number="${order.orderNumber}" th:if="${order.status == 'PENDING'}">取消</button>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(orders)}">
                                <td colspan="11">暂无收到的包裹。</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框（订单详情） -->
    <div class="modal fade" id="orderDetailsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p><strong>订单号:</strong> <span id="modalOrderNumber"></span></p>
                    <p><strong>寄件人:</strong> <span id="modalSenderName"></span> (<span id="modalSenderPhone"></span>)</p>
                    <p><strong>寄件地址:</strong> <span id="modalSenderAddress"></span></p>
                    <p><strong>收件人:</strong> <span id="modalReceiverName"></span> (<span id="modalReceiverPhone"></span>)</p>
                    <p><strong>收件地址:</strong> <span id="modalReceiverAddress"></span></p>
                    <p><strong>包裹类型:</strong> <span id="modalPackageType"></span></p>
                    <p><strong>重量:</strong> <span id="modalWeight"></span> kg</p>
                    <p><strong>体积:</strong> <span id="modalVolume"></span> m³</p>
                    <p><strong>价格:</strong> <span id="modalPrice"></span> 元</p>
                    <p><strong>状态:</strong> <span id="modalStatus" class="badge"></span></p>
                    <p><strong>创建时间:</strong> <span id="modalCreatedAt"></span></p>
                    <p><strong>更新时间:</strong> <span id="modalUpdatedAt"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定的 JavaScript -->
    <th:block layout:fragment="scripts">
        <script th:src="@{/js/my_received_parcels.js?v=2}"></script>
    </th:block>
</body>
</html> 